<template>
	<view class="container">
		<empty v-if="dataList.length == 0"></empty>
		<view v-else>
			<view style="width:calc(100% - 40upx);margin: 20upx;background-color: white;border-radius: 20upx;overflow: hidden;"
			 v-for="(item,index) in dataList" @longpress="deleteItem(item)">
				<uni-collapse>
					<uni-collapse-item :title="item.toName" :open="index == 0" style="background-color: white;">
						<view class="list-cell">
							<view class="list-cell-item">
								<view class="item-title">姓名</view>
								<view class="item-info">{{item.toName}}</view>
							</view>
							<view class="list-cell-last" @click="changeRelation(index)">
								<view class="item-title">关系</view>
								<view class="item-info">{{item.relationName}}</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<uni-popup :animation="true" type="center" ref="addRelation">
			<view style="width:600upx;background-color: white;border-radius: 20upx;border:none">
				<view class="popup-top">
					新增关系
				</view>
				<view class="popup-middle">
					<view class="list-cell">
						<view class="list-cell-item">
							<view class="item-title">姓名</view>
							<view class="item-info">
								<bjx-inputs itemKey="name" the-style="height:48px;line-height:48px;" :width="300" :value="searchName" @list="searchNameOptions"
								 placeholder='请输入身份证号搜索' @select="selectOption"></bjx-inputs>
							</view>
						</view>
						<view class="list-cell-last">
							<view class="item-title">关系</view>
							<view class="item-info">
								<picker @change="bindRelationChange" :range="relationNameList" :value="inputRelation">
									<view class="picker_class">{{inputRelation}}</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-bottom">
					<button class="cancel-btn" @click="cancelAddRelation">取消</button>
					<button class="confirm-btn" @click="confirmAddRelation">确认</button>
				</view>
			</view>
		</uni-popup>
		<view style="height: 140upx;"></view>
		<button type="primary" class="button_class" @click="addUserRelation">新增</button>
		<wPicker mode="selector" @confirm="confirmRelation" ref="relation" :selectList="relationList"></wPicker>
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item'
	import wPicker from '@/components/w-picker/w-picker'
	import bjxInputs from '@/components/bjx-inputs/bjx-inputs'
	import uniPopup from '@/components/uni-popup/uni-popup'
	import empty from "@/components/empty";

	export default {
		data() {
			return {
				ownerId: "",
				areaCode: this.$api.util.getAreaCode(),
				ownerInfo: {},
				dataList: [],
				relationList: [{
					index: 0,
					label: "父子"
				}, {
					index: 1,
					label: "母子"
				}, {
					index: 2,
					label: "父女"
				}, {
					index: 3,
					label: "母女"
				}, {
					index: 4,
					label: "兄弟"
				}, {
					index: 5,
					label: "兄妹"
				}, {
					index: 6,
					label: "姐弟"
				}, {
					index: 7,
					label: "姐妹"
				}, {
					index: 8,
					label: "子父"
				}, {
					index: 9,
					label: "子母"
				}, {
					index: 10,
					label: "女父"
				}, {
					index: 11,
					label: "女母"
				}, {
					index: 12,
					label: "弟兄"
				}, {
					index: 13,
					label: "妹兄"
				}, {
					index: 14,
					label: "弟姐"
				}, {
					index: 15,
					label: "妹姐"
				}],
				relationNameList: ["父子", "母子", "父女", "母女", "兄弟", "兄妹", "姐弟", "姐妹", "子父", "子母", "女父", "女母", "弟兄", "妹兄", "弟姐", "妹姐"],
				relation: ["母子"],
				index: 0,
				inputRelation: "未选择",
				inputName: "未选择",
				userNameList: [],
				bindPerson: {},
				searchName: "",
				ownerOptions: []
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync("userInfo");
			if (userInfo && userInfo.ownerInfo && userInfo.ownerInfo.ownerId) {
				this.ownerId = userInfo.ownerInfo.ownerId
			}
			this.getOwnerRelationInfo()
		},
		components: {
			uniCollapse,
			uniCollapseItem,
			wPicker,
			uniPopup,
			bjxInputs,
			empty
		},
		methods: {
			getOwnerRelationInfo() {
				let params = {
					id: this.ownerId
				}
				this.$api.request.getOwnerRelationByFromId(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.ownerInfo = res.body.data.ownerInfo
						this.dataList = res.body.data.relations
					}
				})
			},
			cancelAddRelation() {
				this.$refs.addRelation.close()
			},
			confirmAddRelation() {
				if (!this.bindPerson) {
					this.$api.msg("请选择绑定人姓名")
					return
				}

				if (typeof(this.bindPerson) != 'object') {
					this.$api.msg("请选择绑定人姓名")
					return
				}

				if (this.inputRelation == "未选择") {
					this.$api.msg("请选择绑定关系")
					return
				}
				console.log(this.bindPerson)
				let relationInfo = {
					toId: this.bindPerson.id,
					toIdCard: this.bindPerson.idCard,
					toName: this.bindPerson.name,
					relationName: this.inputRelation,
					fromId: this.ownerInfo.id,
					fromName: this.ownerInfo.name,
					fromIdCard: this.ownerInfo.idCard
				}
				this.$api.request.setOwnerRelation(relationInfo, (res) => {
					if (res.body.status.statusCode == "0") {
						this.getOwnerRelationInfo();
						this.$api.msg("添加成功")
						this.$refs.addRelation.close()
					}
				})
			},
			bindNameChange(e) {
				this.inputName = this.userNameList[e.target.value]
			},
			bindRelationChange(e) {
				this.inputRelation = this.relationNameList[e.target.value]
			},
			searchNameOptions(e) {
				if (typeof(e.value) == "object") {
					this.searchName = e.value.toIdCard
				} else {
					this.searchName = e.value
				}
				if (this.searchName.length > 17) {
					let params = {
						areaCode: this.areaCode,
						idCard: this.searchName
					}
					this.$api.request.getOwnerByIdCard(params, (res) => {
						if (res.body.status.statusCode == "0") {
							console.log("数据查询成功")
							this.ownerOptions = res.body.data
							e.callback(this.ownerOptions)
						}
					})
				}
			},
			selectOption(e) {
				this.bindPerson = e
			},
			addUserRelation() {
				this.searchName = "";
				this.inputRelation = "未选择"
				this.ownerOptions = [];
				this.$refs.addRelation.open()
			},

			changeRelation(index) {
				this.index = index;
				this.inputRelation = this.dataList[this.index].relationName;
				this.$refs.relation.show()
			},
			confirmRelation(e) {
				this.dataList[this.index].relationName = e.result
				// 修改关系
                console.log(this.dataList[this.index])
				this.updateItem()
			},
			updateItem(){
				let params = this.dataList[this.index];
				this.$api.request.updateOwnerRelation(params,(res)=>{
					if (res.body.status.statusCode == "0") {
						this.$api.msg("修改成功")
					} else {
						this.$api.msg("修改失败")
					}
				})
			},
			deleteItem(item) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: "确认删除该条关系吗",
					success: function(res) {
						if (res.confirm) {
							_this.deleteRelation(item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			deleteRelation(item) {
				let params = {
					id: item.id
				}
				this.$api.request.removeOwnerRelation(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.$api.msg("删除成功")
						this.getOwnerRelationInfo()
					} else {
						this.$api.msg("删除失败")
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fbfbfb;
	}

	.container {
		width: 100%;
		overflow: hidden;
	}

	.popup-top {
		height: 90upx;
		line-height: 90upx;
		font-size: 32upx;
		padding-left: 30upx;
		font-weight: bolder;
		border-bottom: 1px solid #e9eef5;
	}

	.popup-middle {
		padding: 20upx 0upx;
	}

	.popup-bottom {
		display: flex;
		flex-direction: row;
		font-size: 26upx;
	}

	.cancel-btn {
		width: 50%;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		border-radius: 0upx;
		border-bottom-left-radius: 20upx;
		background-color: $page-color-base;
		border-color: $page-color-base;
	}

	.confirm-btn {
		width: 50%;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		border-radius: 0upx;
		border-bottom-right-radius: 20upx;
		background-color: #1DA3EE;
		color: white
	}

	.button_class {
		position: fixed;
		z-index: 90;
		bottom: 40upx;
		margin-top: 20upx;
		width: 80%;
		margin-left: 10%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #1DA3EE !important;
		color: white
	}

	.list-cell {
		padding: 0 30upx;

		.list-cell-item {
			height: 48px;
			line-height: 48px;
			border-bottom: 1px solid #e9eef5;
			display: flex;
			flex-direction: row;
			font-size: 30upx;
			justify-content: space-between;

			.item-title {
				font-weight: border;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {
				text-align: right;
				margin-right: 20upx;
			}
		}

		.list-cell-last {
			height: 48px;
			line-height: 48px;
			display: flex;
			flex-direction: row;
			font-size: 30upx;
			justify-content: space-between;

			.item-title {
				font-weight: border;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {
				text-align: right;
				margin-right: 20upx;
			}
		}
	}
</style>
